<script lang="ts">
  import { request, gql } from "graphql-request";

  import { useMutation } from "@sveltestack/svelte-query";

  //const url = navigator.userAgent.includes("Windows") ? "https://customprotocol.test/example.html" : "customprotocol://test/example.html";
  const url = navigator.userAgent.includes("Windows")
    ? "https://graphql.localhost/graphql"
    : "graphql://graphql";

  let foo = "baz";
  let bar = "qux";
  let result = null;

  const FILMS_QUERY = gql`
    {
      add(a: 10, b: 20)
    }
  `;

  const ANSWER_TASK_MUTATION = gql`
    mutation (
      $taskId: ID!
      $stdAnswer: String!
      $answer: String!
      $seconds: Int
    ) {
      task: answerTaskQuizitem(
        input: {
          taskId: $taskId
          stdAnswer: $stdAnswer
          answer: $answer
          seconds: $seconds
        }
      ) {
        id
        createdAt
        updatedAt
        status
        from
      }
    }
  `;

  const variables = {
    taskId: "task:001",
    stdAnswer: "k1",
    answer: "k1",
    seconds: 3,
  };

  const mutation = useMutation(
    (newFooBar) =>
      //request(url, FILMS_QUERY).then((data) => {
      request(url, ANSWER_TASK_MUTATION, variables).then((data) => {
        console.log(data);
        return data;
      }),
    {
      onMutate: (variables) => {
        // A mutation is about to happen!

        // Optionally return a context containing data to use when for example rolling back
        return { id: 1 };
      },
      onError: (error, variables, context) => {
        // An error happened!
        console.log(
          `ANSWER_TASK_MUTATION rolling back optimistic update with id ${context.id}`
        );
      },
      onSuccess: (data, variables, context) => {
        // Boom baby!
        console.log(
          "ANSWER_TASK_MUTATION Boom baby! onSuccess, data=%s, variables=%s, context=%s",
          JSON.stringify(data),
          JSON.stringify(variables),
          JSON.stringify(context)
        );
      },
      onSettled: (data, error, variables, context) => {
        // Error or success... doesn't matter!
        console.log("ANSWER_TASK_MUTATION I'm onSettled!");
      },
    }
  );
</script>

<div class="items-center px-5 py-8 mx-auto lg:px-24">
  <div class="flex flex-wrap mb-12 text-left">
    <br />
    <br />
    <br />

    <h3>
      Graphql request with frontend: Svelte-Query + Graphql-Request , backend:
      async-graphql + tauri-customprotocol
    </h3>

    <input bind:value={foo} />
    <input bind:value={bar} />
    <br />
    <button
      type="button"
      on:click={() => {
        const res = $mutation.mutate({ foo: foo, bar: bar });
      }}
    >
      Post it to answer quiz item task.
    </button>
    <p class="bg-rose-300">
      aaaaaaaaaa:
      {$mutation.isLoading ? "useMutation loading ..." : $mutation.data || ""}
    </p>
    {#if $mutation.isLoading}
      <p>Adding FooBar...</p>
    {:else if $mutation.isError}
      <p>Error: {$mutation.error.message}</p>
    {:else if $mutation.isSuccess}
      <p>FooBar Added Successfully! Result:</p>
      {$mutation.data}
    {:else}
      <h1>
        Click `Post it` to create FooBar using async-graphql+customprotocol
      </h1>
    {/if}
  </div>
</div>
